<template>
  <view class="nav-grid">
    <view class="nav-item" v-for="(item,index) in options" :key="index" @click="$toPage(item.url)">
      <img class="nav-icon" :src="item.icon" mode="aspectFit" v-if="item.icon && item.icon.includes($FILE_PATH)"/>
      <img class="nav-icon" :src="require(`@/static${item.icon}`)" mode="aspectFit" v-else/>
      <text class="nav-text">{{item.title}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data(){
      return{

      }
    },
    props:{
      options:{
        type:Array
      }
    },
    methods:{

    }
  }
</script>
<style lang="scss">
/* 功能导航 */
.nav-grid {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 30rpx;
  background-color: #FFFFFF;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 88rpx;
  height: 88rpx;
  margin-bottom: 12rpx;
  border-radius: 16rpx;
}

.nav-text {
  font-size: 28rpx;
  color: #333333;
}
</style>
